<template>
  <my-card v-auth="'demo:list'" class="card">
    <!-- 筛选条件区 -->
    <Screen :getList="query" />
    <el-button v-auth="'demo:add'" type="primary" @click="operate">添加</el-button>

    <!-- 列表区 -->
    <BaseTable class="table-box" :tableObj="tableObj">
      <template v-if="isAuth(['demo:edit', 'demo:delete'])" #default>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button v-auth="'demo:edit'" type="primary" link @click="operate(row)">编辑</el-button>
            <el-button v-auth="'demo:delete'" type="danger" link @click="deleteData(row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>

    <!-- 新增、编辑弹窗 -->
    <AddOrEdit ref="addOrEditRef" :dialogTitle="dialogTitle" :confirm="handleUplate" />
  </my-card>
</template>

<script lang="ts" setup>
import MyCard from '@/components/card/MyCard.vue'
import BaseTable from '@/components/table/BaseTable.vue'
import Screen from './components/Screen.vue'
import AddOrEdit from './components/AddOrEdit.vue'
import type { ParamsVo } from './components/AddOrEdit.vue'
import type { TableObj } from '@/components/table/types'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { isAuth } from '@/utils/directives/auth/userAuth'

const params = ref<any>({
  inputValue: '',
  selectValue: '',
  selectValues: []
})

const tableObj = ref<TableObj>({
  tableHeader: [
    { label: '图标', value: 'icon' },
    { label: '菜单名称', value: 'name' },
    { label: '是否展示', value: 'isShow' },
    { label: '路由', value: 'path' },
    { label: '权限标识', value: 'permission' },
    { label: '组件路径', value: 'component' },
    { label: '排序', value: 'sort', width: '60px' },
    { label: '状态', value: 'status', width: '80px' },
    { label: '创建时间', value: 'createTime' }
  ],
  tableData: [
    { id: 1, path: '/home', isShow: '是', name: '首页', icon: 'home.png', keepAlive: true, permission: '', component: '/home/home', sort: 1, status: '启用', createTime: '2023-09-28 08:45:30' },
    {
      id: 2,
      name: '案例',
      icon: 'demo.png',
      permission: '',
      sort: 2,
      status: '启用',
      createTime: '2023-09-28 08:45:30',
      children: [
        { id: 2.1, path: '/commonScreen', name: '公共组件使用', isShow: '是', component: '/demo/common-component' },
        { id: 2.2, path: '/routerParams', name: '路由传参案例', isShow: '是', component: '/demo/router-params' },
        { id: 2.3, path: '/form-screen', name: 'Form表单筛选项', isShow: '是', component: '/demo/form-screen' }
      ]
    },
    {
      id: 3,
      name: '权限管理',
      icon: 'setting.png',
      sort: 3,
      status: '启用',
      createTime: '2023-09-28 08:45:30',
      children: [
        { id: 3.1, path: '/user-manage', name: '用户管理', isShow: '是', component: '/system/user-manage' },
        {
          id: 3.2,
          path: '/menu',
          name: '菜单管理',
          isShow: '是',
          component: '/system/menu-manage',
          children: [
            { id: 3.11, name: '查询', isShow: '是', permission: 'sys:menu:list', sort: 1, status: '启用', createTime: '2023-09-28 08:45:30' }
          ]
        }
      ]
    }
  ]
})
const addOrEditRef = ref<InstanceType<typeof AddOrEdit> | undefined>()
const dialogTitle = ref<string>('新建')

onMounted(() => {})

// 查询按钮返回的参数
const query = async (value: any) => {
  params.value = {
    inputValue: value.inputValue,
    selectValue: value.selectValue,
    selectValues: value.selectValues
  }
  getList()
}

// 查询列表接口
const getList = async () => {
  const data = {
    inputValue: params.value.inputValue,
    selectValue: params.value.selectValue,
    selectValues: params.value.selectValues
  }
  console.log(data)
}

// 新建/编辑
const operate = (row?: ParamsVo) => {
  if (!addOrEditRef.value) return
  if (row) {
    dialogTitle.value = '编辑'
    addOrEditRef.value.params = {
      id: row.id,
      name: row.name,
      gender: row.gender
    }
  } else {
    dialogTitle.value = '新建'
  }
  addOrEditRef.value.dialogFlag = true
}

// 确定新增、编辑
const handleUplate = async (value: ParamsVo) => {
  try {
    const { id } = value
    // id存在为编辑，否则为新增
    id ? console.log('编辑参数：', value) : console.log('添加参数：', value) // 请求对应接口
    ElMessage.success(`${id ? '编辑' : '添加'}成功`)
    addOrEditRef.value?.closedDialog()
    getList()
  } catch (error) {
    console.log('新增/编辑失败，请核查后再操作！')
  }
}

// 删除
const deleteData = async (row: ParamsVo) => {
  const params: { id: number; } = { id: row.id as number }
  console.log(params)
  ElMessage.success('删除成功')
}

</script>

<style lang="scss" scoped>
  .card {
    margin-bottom: 20px;
    .table-box {
      margin: 20px 0;
    }
  }
</style>
